Windows Presentation Foundation

Animace s klíčovými snímky

Tento druh animace v sobě spojuje více typů animací. Obsahuje lineárně interpolační animaci, diskrétní animaci a spline animaci. Každý typ animace pak představuje jeden klíčový snímek. Těch může být v animaci s klíčovými snímky vícero. Všechny klíčové snímky jsou určené pouze pro typ hodnoty vlastnosti, pro které je animace s klíčovými snímky. Nelze kombinovat například klíčové snímky pro typ double a typ string. Také ne pro všechny typy vlastností se dají použít všechny typy klíčových snímků. Například pro typ string nedávají smysl klíčové snímky: lineární a spline (animace po křivce). Pro nastavení klíčových snímků slouží atribut KeyFrames.

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="presunCtverce1"
                               Storyboard.TargetProperty="X"
                               Duration="0:0:8"
                               FillBehavior="Stop">

          <DoubleAnimationUsingKeyFrames.KeyFrames>
                 <LinearDoubleKeyFrame Value="400" KeyTime="0:0:8"/>                                    
          </DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>
                

Syntaxe klíčových snímků:

Lineární klíčový snímek

Funguje podobně jako základní animace. Element lineárního snímku má hodnotu Value. Ta slouží podobně jako atribut To u základní animace. KeyTime je cílový čas během kterého se změní původní hodnota na hodnotu Value. Pokud, je snímek prvním snímkem v animaci. Původní hodnota je stejná jako hodnota vlastnosti animovaného objektu. Jinak je původní hodnota stejná jako hodnota Value u předchozího snímku.

<LinearDoubleKeyFrame Value="400" KeyTime="0:0:8"/>

Diskrétní klíčový snímek

Diskrétní klíčový snímek změní hodnotu animované vlastnosti na hodnotu Value. Hodnota je změněna bez přechodu z původní hodnoty na hodnotu Value. Ke změně vlastnosti dojde v KeyTime.

<StringAnimationUsingKeyFrames.KeyFrames>
         <DiscreteStringKeyFrame Value="A" KeyTime="0:0:1"/>
           <DiscreteStringKeyFrame Value="An" KeyTime="0:0:2"/>
           <DiscreteStringKeyFrame Value="Ani" KeyTime="0:0:3"/>
           <DiscreteStringKeyFrame Value="Anim" KeyTime="0:0:4"/>
           <DiscreteStringKeyFrame Value="Anima" KeyTime="0:0:5"/>
           <DiscreteStringKeyFrame Value="Animac" KeyTime="0:0:6"/>
           <DiscreteStringKeyFrame Value="Animace" KeyTime="0:0:7"/>
</StringAnimationUsingKeyFrames.KeyFrames>

Spline snímek

U základní animace je změna hodnoty dána lineární funkcí a časem běhu animace. U Spline snímku je změna hodnoty dána kubickou Bézierovou křivkou a časem běhu animace. Na Obrázku 6 je zobrazena tato křivka.

Obrázek 6 Spline křivka pro animování hodnoty vlastnosti [zdroj: vlastní]

Tato křivka se nazývá Spline křivka. Počátek má v bodě [0,0] a konec křivky je v bodě [1,1]. Pro nastavení tvaru křivky slouží dva kontrolní body.

Podle tvaru křivky se v určitém časovém okamžiku (dt) zjišťuje hodnota změny animované vlastnosti (dy). Na obrázku jsou časové úseky dt stejně velké. Naproti tomu změna hodnoty dy je pro každý časový okamžik různá. Čím křivka strměji stoupá, tím budou i větší změny animované vlastnosti. Na Obrázku 35 je ukázka z aplikace SplineDoubleKeyFrame.

Obrázek 7 Ukázka z aplikace SplineDoubleKeyFrame [zdroj: vlastní]

<SplineDoubleKeyFrame Value="400" KeySpline="0.1,0.9 0.9,0.1" KeyTime="0:0:5"/>